<template>
    <div class="page_menu_shelves">
        <div class="shelves_menu">
            <n-menu :options="menuOptions" :default-expand-all="true" :default-value="menuDefaultValue"
                :default-expanded-keys="defaultExpandedKeys" :on-update:value="onUpdateExpandedKeys" />
        </div>
        <div class="shelves_content">
            <slot name="content"></slot>
        </div>
    </div>
</template>

<script setup>
import { NMenu } from "naive-ui"

const props = defineProps({
    menuOptions: {
        type: Array,
        default: () => []
    },
    defaultExpandedKeys: {
        type: Array,
        default: () => []
    },
    menuDefaultValue: {
        type: String,
        default: ''
    },
})

const emits = defineEmits(['update:expanded-keys'])

const onUpdateExpandedKeys = (keys) => {
    emits('update:expanded-keys', keys)
}
</script>

<style lang='less'>
.page_menu_shelves {
    display: flex;

    .shelves_menu {
        min-width: 249px;
    }

    .shelves_content {
        padding: 20px
    }
}
</style>